﻿<div>
    <h1>Riding along on a carousel</h1>
    <div>
        Categories:
        <select ng-model="category" ng-options="c.name for c in categories" ng-change="categoryChange()"></select>
    </div>
</div>

<div class="col-md-9 col-md-offset-1 col-lg-9 col-lg-offset-1">
    <div id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li ng-repeat="ii in imageInfo" data-target="#myCarousel" ng-class="$first ? 'active': ''" data-slide-to=" {{$index}}"></li>
        </ol>

        <!-- Carousel items -->
        <div class="carousel-inner">
            <div ng-repeat="ii in imageInfo" ng-class="$first ? 'item active': 'item'">
                <img src="{{ii.url}}" class="img-responsive" />
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

</div>
<script>
    // Added this just so I didn't have to wait 5 seconds to see if the transition worked. //
    $(document).ready(function () {
        $('.carousel').carousel({
            interval: 5000
        });
    });
</script>
